<template>
  <div id="app">
    <router-view />
    <!-- <svg-icon icon-class="password" />// icon-class 为 svg图片 的名字 -->
    <svg>
      <!--
        <symbol>标记的作用是定义一个图像模板，
          你可以使用<use>标记实例化它，然后在SVG文档中反复使用，
            这种用法非常的高效
      -->
      <symbol id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
      </symbol>
      <!-- use 通过id 引用defs声明的标签 -->
      <use xlink:href="#shape" x="50" y="50" />
      <use xlink:href="#shape" x="200" y="50" />
      <use xlink:href="#shape" x="250" y="50" />
      <use xlink:href="#shape" x="300" y="50" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style lang="scss">
@import '@/styles/variables.scss';
.custom-class {
  color: $menuActiveText;
}
</style>
